<script setup lang="ts">
// 投放资源位
import {message} from "ant-design-vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const props = defineProps({
  rows: {
    type: Array,
    default: () => []
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: ''
  },
  staticAdPkgLists: {
    type: Array,
    default: () => []
  },
});
const visible = ref(false);
const handle = () => {
  if (props.rows.length === 0) {
    message.error("请选择需要批量处理的数据！");
    return;
  }
  visible.value = true;
};
const adZonePkgIdList = ref<any[]>([]);
const toggle = (item: any) => {
  if (adZonePkgIdList.value.includes(item.id)) {
    adZonePkgIdList.value = adZonePkgIdList.value.filter((i: any) => i !== item.id);
  } else {
    adZonePkgIdList.value.push(item.id);
  }
};
const update = () => {
  const campaignIds: string[] = props.rows.map((r: any) => r.campaignId);
  WxtUtils.advancedBatchUpdate([
      ...campaignIds.map((campaignId: string) => ({
        campaignId,
        adZonePkgIdList: adZonePkgIdList.value,
      })),
  ],props.bizCode).then(res => {
    visible.value = false;
    if (res.data.info.ok !== true) {
      message.error(res.data.info.message)
      return;
    }
    message.success("设置资源位成功！");
  }).finally(() => {
    adZonePkgIdList.value = [];
  });
};
</script>

<template>
  <div @click="handle">
    <slot>
      <a-button size="small" type="primary" ghost>投放资源位</a-button>
    </slot>
  </div>
  <wxt-modal v-model:visible="visible" title="设置资源位" :width="700" :style="{
    top: 'revert-layer',
  }"
  >
    <a-row type="flex" class="header">
      <a-col :span="4">
        资源位
      </a-col>
      <a-col flex="1">

      </a-col>
      <a-col :span="4">
        操作
      </a-col>
    </a-row>
    <a-row type="flex" v-for="(item,key) in staticAdPkgLists" class="item">
      <a-col :span="4">
        {{ item.title }}
      </a-col>
      <a-col flex="1" class="desc">
        （{{ item.desc }}）
      </a-col>
      <a-col :span="4">
        <a-switch @change="toggle(item)" :checked-value="!adZonePkgIdList.includes(item.id)" :targetId="item.id"/>
      </a-col>
    </a-row>
    <a-divider style="margin-top: 0;"/>
    <a-row type="flex" style="text-align: right;">
      <a-col flex="1"/>
      <a-col>
        <a-space>
          <a-button type="default" @click="visible=false">取消</a-button>
          <a-button type="primary" @click="update">确定</a-button>
        </a-space>
      </a-col>
    </a-row>
  </wxt-modal>
</template>

<style lang="less" scoped>
.header{
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0;
  //border-bottom: 1px solid #eee;
}
.item{
  padding: 10px 0;
  border-top: #eee 1px solid;
  .desc{
    color: #999;

  }
}
</style>
